<template>
  <div>
    <div class="home-title">
      <van-tabs @change="onTabChange">
        <van-tab
          v-for="item in channelList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        />
      </van-tabs>
      <div class="wapper" />
      <div class="title-btn">
        <van-icon
          name="search"
          @click="onSearch"
        />
        <van-icon name="apps-o" />
      </div>
    </div>
    <main>
      <van-loading
        v-if="isShow"
        class="loading"
        type="spinner"
        color="#1989fa"
      />
      <van-empty
        v-else-if="articleList.length === 0"
        description="暂无数据"
      />
      <van-empty
        v-else-if="!articleList"
        image="error"
        description="请求错误"
      />
      <article-list
        v-else
        :data="articleList"
      />
    </main>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  name: 'HomePage',
  data() {
    return {
      isShow: true,
    };
  },
  computed: {
    ...mapState('channel', [
      'channelList'
    ]),
    ...mapState('article', [
      'articleList'
    ]),
  },
  methods: {
    onSearch() {
      this.$router.push('/search')
    },
    onTabChange(id) {
      this.updateArticleList(id);
    },
    ...mapActions('channel', [
      'updateChannelList',
    ]),
    ...mapActions('article', [
      'updateArticleList',
    ]),
  },
  async created() {
    await this.updateChannelList();
    this.updateArticleList(0);
    this.isShow = false;
  },
}
</script>

<style lang="less" scoped>
  .home-title {
    position: relative;
    display: flex;
    height: 45px;
    border-bottom:1px solid #aaa;
    .van-tabs{
      width: 80%;
    }
    .wapper {
      top: 0;
      right: 20%;
      position: absolute;
      background: linear-gradient(270deg,#fff,hsla(0,0%,100%,.3));
      width: 24px;
      height: 100%;
    }
    .title-btn {
      border: none;
      width: 20%;
      text-align: center;
      font-size: 24px;
      line-height: 44px;
      color: #aaa;
      i {
        margin-right: 6px;
      }
    }
  }
main {
  height: calc(100vh - 46px);
  overflow: auto;
  .loading {
    display: flex;
    justify-content: center;
    margin: 50px;
  }
}
</style>
